<script setup name="myPage">
import {onShow,} from '@dcloudio/uni-app'
import BASE_URL from '@/utils/env'
import {useUserData} from './hooks/useUserData'
import PopupDialog from "@/global/components/popupDialog/PopupDialog.vue";
import { SEX_OPTIONS } from "@/global/const";

const { getUserData, userData, afterRead, popupRef,handleToUpdate, updateParams,updateFormData,updateUserInfo } = useUserData()

onShow(() => {
  getUserData()
})
</script>

<template>
  <view class="myPage-container">
    <view class="user-photo">
      <up-image width="180rpx"
                height="180rpx"
                :src="`${BASE_URL}images/${userData?.avatar}`"
                shape="circle"
      >
        <view slot="error" style="font-size: 24rpx;">加载失败</view>
      </up-image>
      <up-upload
                 @afterRead="afterRead"
                 :maxCount="1">
        <view class="upload-area"></view>
      </up-upload>
    </view>
    <uni-list>
      <uni-list-item show-extra-icon
                     title="用户名" :rightText="userData?.username"/>
      <uni-list-item show-extra-icon showArrow clickable
                     title="姓名" @click="() => handleToUpdate('姓名','name','input')" :right-text="userData?.name"/>
      <uni-list-item show-extra-icon showArrow clickable
                     title="性别" @click="() => handleToUpdate('性别','sex',)"  :right-text="userData?.sex == 1 ? '女' : '男' "/>
      <uni-list-item show-extra-icon showArrow clickable
                     title="手机号" @click="() => handleToUpdate('手机号','phone','input')"  :right-text="userData?.phone"/>
      <uni-list-item show-extra-icon
                     title="是否认证">
        <template #footer>
          <uni-tag v-if="userData?.isApprove" text="已认证" type="success"/>
          <uni-tag v-else text="未认证" type="warning"/>
        </template>
      </uni-list-item>
      <uni-list-item show-extra-icon :right-text="userData?.loginTime"
                     title="上次登录时间"/>
    </uni-list>

    <popup-dialog :confirm="updateUserInfo" :title="`修改${updateParams.label}`" ref="popupRef" >
      <template #default>
        <up-input
            v-if="updateParams.type === 'input'"
            clearable
            :placeholder="`请输入${updateParams.label}`"
            border="surround"
            v-model="updateFormData[updateParams.key]"
        />
        <uni-data-select v-else v-model="updateFormData[updateParams.key]" :localdata="SEX_OPTIONS"  />
      </template>
    </popup-dialog>
  </view>
</template>

<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
  height: 100%;
}

:deep(.uni-page-head-btn) {
  display: block !important;
}

:deep(.u-cell) {
  background-color: #ffffff !important;
}

.user-photo {
  position: relative;
  width: 100%;
  padding: 80rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;

  :deep(.u-upload) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 180rpx !important;
    width: 180rpx !important;

    .u-upload__button {
      height: 100% !important;
      width: 100% !important;
      margin: unset !important;
    }

    .upload-area {
      height: 180rpx !important;
      width: 180rpx !important;
    }
  }

  :deep(.u-image) {
    //z-index: 100 !important;
  }
}

.uni-list {
  :deep(.uni-list-item__content) {
    font-size: 25rpx !important;
  }

  :deep(.uni-list-item__extra) {
    .uni-list-item__extra-text {
      font-size: 30rpx !important;
      color: $u-tips-color;
    }
  }
}

</style>
